<template>
  <div class="common-layout">
    <div class="with-border pulse-candidate-area">
      <el-checkbox v-model="selectAllPulse" label="全选" size="large" />
      <div class="content-wrapper">
        <div class="section-title">这里是脉冲型故障待选区</div>
        <div class="section-description">四个区域所有故障相加应超过20个</div>
        <div class="items-placeholder">（脉冲型故障项目列表区域）</div>
      </div>
    </div>

    <div class="with-border other-fault-type-area flex headToolbar">
      <el-checkbox v-model="selectAllStep" label="全选" />
      <span class="fault-type-label">这里是阶跃型故障待选区</span>
    </div>
    <div class="with-border other-fault-type-area flex headToolbar">
      <el-checkbox v-model="selectAllMonotonic" label="全选" />
      <span class="fault-type-label">这里是单调周期型故障待选区</span>
    </div>
    <div class="with-border other-fault-type-area flex headToolbar">
      <el-checkbox v-model="selectAllCyclic" label="全选" />
      <span class="fault-type-label">这里是循环周期型故障待选区</span>
    </div>

    <el-row class="toolbar-wrapper with-border" align="middle" :gutter="10">
      <el-col :xs="24" :sm="4" :md="3">
        <el-button type="primary" @click="startProcess" style="width: 100%;">开始</el-button>
      </el-col>
      <el-col :xs="12" :sm="5" :md="3"><div class="status-box">待测总数: {{ totalToTest }}</div></el-col>
      <el-col :xs="12" :sm="3" :md="2"><div class="status-box">脉冲: {{ pulseCount }}</div></el-col>
      <el-col :xs="12" :sm="3" :md="2"><div class="status-box">阶跃: {{ stepCount }}</div></el-col>
      <el-col :xs="12" :sm="5" :md="4"><div class="status-box">单调周期: {{ monotonicCount }}</div></el-col>
      <el-col :xs="12" :sm="5" :md="4"><div class="status-box">循环周期: {{ cyclicCount }}</div></el-col>
      <el-col :xs="12" :sm="4" :md="3"><div class="status-box active-status">准确率: {{ accuracyRate }}%</div></el-col>
      <el-col :xs="0" :sm="0" :md="3"></el-col>
    </el-row>

    <el-row :gutter="15" class="bottom-section">
      <el-col :md="15">
        <div class="chart-area with-border">
          <p class="section-header">脉冲型、阶跃型、单调周期型、循环周期型故障的分类模型预测概率</p>
          <p class="section-subheader">（应该是四个折线图，随模型运行而刷新）</p>
          <el-row :gutter="10">
            <el-col :span="12"><div class="chart-placeholder">图表1 (脉冲)</div></el-col>
            <el-col :span="12"><div class="chart-placeholder">图表2 (阶跃)</div></el-col>
            <el-col :span="12"><div class="chart-placeholder">图表3 (单调)</div></el-col>
            <el-col :span="12"><div class="chart-placeholder">图表4 (循环)</div></el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :md="9">
        <div class="log-area with-border"> <p class="section-header">计算 Log</p>
          <el-input
            type="textarea"
            :rows="12"
            placeholder="计算日志将会显示在这里..."
            v-model="logContent"
            readonly
            class="log-textarea"
          ></el-input>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// Refs for checkboxes
const selectAllPulse = ref(false);
const selectAllStep = ref(false);
const selectAllMonotonic = ref(false);
const selectAllCyclic = ref(false);

// Refs for status display (example data)
const totalToTest = ref(123);
const pulseCount = ref(32);
const stepCount = ref(28);
const monotonicCount = ref(33);
const cyclicCount = ref(30);
const accuracyRate = ref(96.8);

// Ref for log content
const logContent = ref('');

// Method for start button
const startProcess = () => {
  console.log('开始处理...');
  logContent.value += `${new Date().toLocaleTimeString()}: 指令已发送，开始处理...\n`;
  setTimeout(() => {
    logContent.value += `${new Date().toLocaleTimeString()}: 数据加载完成，准备分析。\n`;
  }, 1000);
  // ... more log updates
};
</script>

<style scoped lang="scss">
/* Styles from user's previous code */
.common-layout {
  padding: 20px; // Added padding for overall layout
  background-color: #2c3e50; // Dark background
  color: #ffffff; // Default white text
}

.with-border {
  width: 100%;
  border: 1px solid #ccc; // User's specified border, visible on dark bg
  padding: 6px;         // User's specified padding
  border-radius: 16px;  // User's specified border-radius
  background-color: transparent; // User's request for transparent bg
  justify-content: space-around; /* Only affects if it's also a flex container */
  box-sizing: border-box;
  margin-bottom: 10px; // Consistent margin for sections using .with-border
                        // (instead of global .el-row margin for better control here)
}
.with-border:last-child {
    margin-bottom: 0;
}


.headToolbar {
  height: 50px;
  // align-items: center; // Applied via .flex if needed
}

.flex {
  display: flex;
  align-items: center; // Common usage for .flex
}

.no-padding {
  padding: 0 !important;
}

/* Global el-row styling from user's previous code */
:deep(.el-row) { // Apply to el-row components if needed globally within this component
  // If this causes issues with Element Plus's gutter system, be cautious.
  // It's often better to space components rather than all rows.
  // The margin-bottom on .with-border might be a better approach for sections.
  // For now, let's respect the user's previous style for el-row directly.
  margin-bottom: 6px;
}
:deep(.el-row:last-child) {
  margin-bottom: 0;
}


/* Styles for the new UI, adapted to the theme and old styles */
.pulse-candidate-area {
  .el-checkbox {
    align-self: flex-start;
    margin-top: 2px; // Align with text
    margin-right: 10px; // Space from content
  }
  .content-wrapper {
    display: flex;
    flex-direction: column;
  }
  .section-title {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 4px;
  }
  .section-description {
    font-size: 0.9em;
    margin-bottom: 10px;
    color: #bdc3c7;
  }
  .items-placeholder {
    min-height: 60px; // Adjusted due to smaller padding in .with-border
    background-color: rgba(255, 255, 255, 0.03);
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; // Smaller radius for inner element
    font-style: italic;
    border: 1px dashed rgba(204, 204, 204, 0.5); // #ccc with alpha
    padding: 10px;
  }
}

.other-fault-type-area {
  gap: 15px; // Space between checkbox and text
  // background-color: transparent; // Ensured by .with-border
  // padding: 6px; // Ensured by .with-border
  // height: 50px; // Ensured by .headToolbar
  // display: flex; align-items: center; // Ensured by .flex
  .fault-type-label {
    font-size: 1em;
  }
}

.toolbar-wrapper { // Renamed from .toolbar-section to avoid conflict if headToolbar styles are broad
  // padding: 6px !important; // Respect .with-border padding
}

.status-box {
  padding: 8px 6px; // Adjusted padding for smaller text
  border: 1px solid #ccc; // User's border color
  background-color: transparent;
  text-align: center;
  font-size: 0.8em; // Slightly smaller for fitting more
  border-radius: 8px; // Sharper than 16px, but not square
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  // color: #ffffff; // Inherited
}

.active-status {
  background-color: #e67e22;
  color: white;
  font-weight: bold;
  border-color: #d35400; // Darker orange for border
}

.bottom-section {
  // margin-top: 0; // Handled by .with-border's margin-bottom or el-row's margin
}

.section-header {
  font-size: 1.1em;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 8px;
}
.section-subheader {
  font-size: 0.9em;
  margin-top: 0;
  margin-bottom: 10px;
  color: #bdc3c7;
}

.chart-area {
  min-height: 250px; // Adjusted due to smaller padding
  .chart-placeholder {
    height: 80px; // Adjusted
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(204, 204, 204, 0.5); // #ccc with alpha
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px; // Match el-row margin
    border-radius: 8px; // Smaller radius
    font-size: 0.9em;
    padding: 10px;
  }
}

.log-area {
  background-color: #2980b9; // Specific blue background
  color: white;
  min-height: 250px; // Adjusted
  display: flex;
  flex-direction: column;
  // .with-border styles (padding, border-radius) are applied first, then this overrides background
  .section-header {
    color: white;
  }
  .log-textarea {
    flex-grow: 1;
    :deep(.el-textarea__inner) {
      background-color: #3498db;
      color: #ffffff;
      border: 1px solid #2980b9 !important; // Override .with-border's #ccc border here
      height: 100% !important;
      font-family: "Courier New", Courier, monospace;
      font-size: 0.85em;
      border-radius: 8px; // Match inner elements
    }
  }
}

:deep(.el-checkbox__label) {
  color: #ffffff !important;
  font-size: 0.9em; // Consistent label size
}
:deep(.el-checkbox__inner) {
  background-color: transparent !important;
  border-color: #ccc !important; // User's border color for consistency
}
:deep(.el-checkbox.is-checked .el-checkbox__inner) {
  background-color: var(--el-color-primary) !important;
  border-color: var(--el-color-primary) !important;
}
:deep(.el-checkbox.is-checked .el-checkbox__label) {
  color: var(--el-color-primary) !important; // Label color when checked
}


@media (max-width: 576px) {
  .status-box {
    font-size: 0.7em;
    padding: 4px;
    height: 30px;
  }
  .toolbar-wrapper .el-col {
    margin-bottom: 6px;
  }
   .toolbar-wrapper .el-col:last-child {
    margin-bottom: 0;
  }
}
</style>



<template>
  <div class="common-layout">
    <div class="with-border monotonic-candidate-area">
      <el-checkbox v-model="selectAllMonotonicPeriodic" label="全选" size="large" />
      <div class="content-wrapper">
        <div class="section-title">这里是单调周期型故障待选区</div>
        <div class="section-description">两个区域所有故障相加应超过10个</div>
        <div class="items-placeholder">（单调周期型故障项目列表区域）</div>
      </div>
    </div>

    <div class="with-border cyclic-candidate-area flex headToolbar">
      <el-checkbox v-model="selectAllCyclicPeriodic" label="全选" />
      <span class="fault-type-label">这里是循环周期型故障待选区</span>
    </div>

    <el-row :gutter="15" class="bottom-panes-section">
      <el-col :xs="24" :sm="24" :md="5">
        <div class="status-control-pane with-border">
          <el-button type="primary" @click="startAnalysis" style="width: 100%; margin-bottom: 12px;">开始</el-button>
          <div class="status-line">待测数据总数: {{ totalTestData }}</div>
          <div class="status-line">单调正确数: {{ monotonicCorrectCount }}</div>
          <div class="status-line">循环正确数: {{ cyclicCorrectCount }}</div>
          <div class="status-line active-status-line">
            <span>准确率: {{ accuracyRate }}%</span>
            <span class="accuracy-indicator-color-block"></span>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :md="11">
        <div class="chart-display-area with-border">
          <p class="section-header">预测误差折线图</p>
          <p class="section-subheader">（随模型运行而刷新）</p>
          <div class="main-chart-placeholder">（主图表区域）</div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :md="8">
        <div class="log-display-area with-border">
          <p class="section-header">计算 Log</p>
          <el-input
            type="textarea"
            :rows="14" placeholder="计算日志将会显示在这里..."
            v-model="computationLog"
            readonly
            class="log-textarea"
          ></el-input>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// Checkbox models
const selectAllMonotonicPeriodic = ref(false);
const selectAllCyclicPeriodic = ref(false);

// Status display models
const totalTestData = ref(55);
const monotonicCorrectCount = ref(20);
const cyclicCorrectCount = ref(22);
const accuracyRate = ref(92.5);

// Log content model
const computationLog = ref('');

// Start button action
const startAnalysis = () => {
  computationLog.value += `${new Date().toLocaleTimeString()}: 分析开始...\n`;
  // Simulate further log updates
  setTimeout(() => {
    computationLog.value += `${new Date().toLocaleTimeString()}: 数据校验完成。\n`;
  }, 1200);
  setTimeout(() => {
    computationLog.value += `${new Date().toLocaleTimeString()}: 误差计算中...\n`;
  }, 2500);
};
</script>

<style scoped lang="scss">
/* Common styles based on previous standards */
.common-layout {
  padding: 20px;
  background-color: transparent;
  color: #ffffff;
}

.with-border {
  width: 100%;
  border: 1px solid #ccc;
  padding: 6px;
  border-radius: 16px;
  background-color: transparent;
  justify-content: space-around; /* Effective if also display: flex */
  box-sizing: border-box;
  margin-bottom: 10px;
}
.with-border:last-child {
  margin-bottom: 0;
}

.headToolbar {
  height: 50px;
  /* align-items: center; is part of .flex */
}

.flex {
  display: flex;
  align-items: center;
}

.no-padding {
  padding: 0 !important;
}

:deep(.el-row) {
  margin-bottom: 6px;
}
:deep(.el-row:last-child) {
  margin-bottom: 0;
}

/* Styles for the new UI elements */
.monotonic-candidate-area { // Similar to .pulse-candidate-area from before
  .el-checkbox {
    align-self: flex-start;
    margin-top: 2px;
    margin-right: 10px;
  }
  .content-wrapper {
    display: flex;
    flex-direction: column;
  }
  .section-title {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 4px;
  }
  .section-description {
    font-size: 0.9em;
    margin-bottom: 10px;
    color: #bdc3c7;
  }
  .items-placeholder {
    min-height: 80px; // Adjusted height for this section
    background-color: transparent;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-style: italic;
    border: 1px dashed rgba(204, 204, 204, 0.5);
    padding: 10px;
    color: #bdc3c7;
  }
}

.cyclic-candidate-area { // This one uses .flex and .headToolbar
  gap: 15px;
  padding-left: 10px; // Align checkbox with the one above
  .fault-type-label {
    font-size: 1em;
  }
}

.bottom-panes-section {
  // Adjust if .with-border on el-col children needs specific row spacing
}

.status-control-pane {
  padding: 10px; // Override .with-border's 6px for more space
  display: flex;
  flex-direction: column;
  gap: 10px; // Space between status lines
  min-height: 260px; // Example height, adjust as needed
}

.status-line {
  font-size: 0.9em;
  padding: 4px 0;
  display: flex;
  justify-content: space-between; // For accuracy indicator
  align-items: center;
}

.active-status-line {
  // border: 2px solid #e67e22; // Orange border applied to the entire line
  // border-radius: 8px; // Rounded border for the line
  // padding: 6px; // Add padding if border is applied
  // margin: -6px; // Counteract padding to maintain alignment
  // For a more subtle highlight on the text/value itself, or rely on the indicator block
  span:first-child { // The "准确率: XX%" text
    font-weight: bold;
    color: #e67e22; // Orange text for active status value as per last iteration
  }
}
.accuracy-indicator-color-block {
  width: 18px;
  height: 18px;
  background-color: #e67e22; // Solid orange fill as per prototype
  border-radius: 3px;
  margin-left: 8px;
}


.section-header {
  font-size: 1.1em;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 4px; // Reduced margin
}
.section-subheader {
  font-size: 0.9em;
  margin-top: 0;
  margin-bottom: 8px; // Reduced margin
  color: #bdc3c7;
}

.chart-display-area {
  padding: 10px; // Override .with-border's 6px
  display: flex;
  flex-direction: column;
  min-height: 260px; // Example height
  .main-chart-placeholder {
    flex-grow: 1;
    background-color: transparent;
    border: 1px dashed rgba(204, 204, 204, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1em;
    color: #bdc3c7;
    margin-top: 5px;
  }
}

.log-display-area {
  padding: 10px; // Override .with-border's 6px
  background-color: transparent;
  min-height: 260px; // Example height
  display: flex;
  flex-direction: column;
  .section-header {
    color: white; // Ensure white text on transparent background
  }
  .log-textarea {
    flex-grow: 1;
    :deep(.el-textarea__inner) {
      background-color: transparent;
      color: #ffffff;
      border: 1px solid #ccc !important; // Consistent with .with-border
      height: 100% !important;
      font-family: "Courier New", Courier, monospace;
      font-size: 0.85em;
      border-radius: 8px;
      padding: 8px; // Internal padding for textarea
    }
  }
}

/* Element Plus component overrides for dark theme */
:deep(.el-checkbox__label) {
  color: #ffffff !important;
  font-size: 0.9em;
}
:deep(.el-checkbox__inner) {
  background-color: transparent !important;
  border-color: #ccc !important;
}
:deep(.el-checkbox.is-checked .el-checkbox__inner) {
  background-color: var(--el-color-primary) !important;
  border-color: var(--el-color-primary) !important;
}
:deep(.el-checkbox.is-checked .el-checkbox__label) {
  color: var(--el-color-primary) !important;
}

/* Responsive adjustments for status control pane items on smaller screens */
@media (max-width: 768px) { /* md breakpoint for Element Plus */
  .bottom-panes-section .el-col { // Stack columns on smaller screens
    margin-bottom: 10px; // From .with-border
  }
   .bottom-panes-section .el-col:last-child {
    margin-bottom: 0;
  }
  .status-control-pane, .chart-display-area, .log-display-area {
      min-height: auto; // Adjust height for stacked layout
  }
  .log-display-area :deep(.el-textarea__inner) {
      min-height: 150px; // Ensure textarea has some height when stacked
  }
}

</style>